<template>
	<view id="independentID" :class="['goods-card', bgclass]" @click="clickHandle">
		<view class="goods-card__main">
			<view class="goods-card__thumb" :style="data.style" @click="clickThumbHandle">
				<image v-if="!!data.goods.primary" class="goods-card__img" :src="data.goods.primary" mode="aspectFill"
					lazy-load />
				<image v-if="!!data.goods.thumb && !!!data.goods.primary" class="goods-card__img"
					:src="data.goods.thumb" mode="aspectFill" lazy-load />
			</view>
			<view v-if="!!!data.goods.primary" :class="['goods-card__body', bgbodyclass]">
				<view class="goods-card__upper">
					<view v-if="data.goods.title" :class="['goods-card__title', titleclass]">
						{{ data.goods.title }}
					</view>
					<!-- <view wx:if="{{ goods.tag && goods.tag.length>0 }}" class="goods-card__tags">
	                    {{goods.tag}}
	                </view> -->
				</view>
				<view :class="['goods-card__down', bgpriceclass]">
					<leisure-uni-price wr-class="spec-for-price" symbol-class="spec-for-symbol" :symbol="props.currency"
						:price="props.userIsScene==1?data.goods.discount_price:data.goods.price" />

					<leisure-uni-price v-if="props.userIsScene==1" class="goods-card__origin-price"
						:symbol="props.currency" :price="props.userIsScene==1?data.price:data.goods.discount_price"
						type1="delthrough" />

					<uni-icons class="goods-card__add-cart" custom-prefix="wr" type="wr-cartAdd" id="independentID-cart"
						@click="addCartHandle" size="48rpx" color="#FA550F"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup name="goods-card">
	import {
		defineComponent,
		watch,
		ref,
		computed,
		reactive,
		nextTick,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	const app = getApp();

	const props = defineProps({
		userIsScene: {
			type: Number,
			default: () => 8
		},
		gid: {
			type: String,
			default: () => ""
		},
		datap: {
			type: Object,
			default: () => ""
		},
		currency: {
			type: String,
			default: () => "¥",
		},
		bgclass: {
			type: String,
			default: () => ""
		},
		bgbodyclass: {
			type: String,
			default: () => ""
		},
		titleclass: {
			type: String,
			default: () => ""
		},
		bgpriceclass: {
			type: String,
			default: () => ""
		},
	});
	const data = reactive({
		independentID: "",
		goods: {
			id: ""
		},
		style: 'height:320rpx',
	});
	const genIndependentID = (id) => {
		let independentID;
		if (id) {
			independentID = id;
		} else {
			independentID = `goods-card-${~~(Math.random() * 10 ** 8)}`;
		}
		data.independentID = independentID;
	}
	const init = () => {
		// props.userIsScene = app.globalData.user_is_scene;
		genIndependentID(props.gid);
	}
	onMounted(() => {
		init();
	})

	onBeforeUnmount(() => {

	});

	watch(() => props.datap, (val) => {
		if (val) {
			data.goods = val;
			data.style = val.primary ? "height:486rpx" : "height:320rpx";
		}
	}, {
		immediate: true
	});

	const emit = defineEmits(['click', 'thumb', 'add-cart']);

	const clickHandle = (param) => {
		emit('click', data.goods);
	}

	const clickThumbHandle = (param) => {
		emit("thumb", data.goods);
	}

	const addCartHandle = (param) => {
		emit('add-cart', data.goods)
	}
</script>

<style scoped>
	.goods-card {
		box-sizing: border-box;
		font-size: 24rpx;
		/* border-radius: 0 0 16rpx 16rpx; */
		border-bottom: none;
		padding-top: 6.5rpx;
		padding-bottom: 6.5rpx;
		width: 333rpx;
		display: flex;
		justify-content: center;
		margin-bottom: 4rpx;
	}

	.goods-card__main {
		position: relative;
		display: flex;
		line-height: 1;
		padding: 0;
		background: transparent;
		width: 320rpx;
		/* border-radius: 16rpx 16rpx 16rpx 16rpx; */
		align-items: stretch;
		justify-content: center;
		flex-direction: column;
		/* height: 486rpx; */
		/*整个商品介绍的高度*/
		/* background-color: red; */
	}

	.goods-card__thumb {
		flex-shrink: 0;
		position: relative;
		width: 320rpx;
		height: 320rpx;
	}

	.goods-card__thumb:empty {
		display: none;
		margin: 0;
	}

	.goods-card__img {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
	}

	.goods-card__body {
		display: flex;
		flex: 1 1 auto;
		background: #fff;
		/* border-radius: 0 0 16rpx 16rpx; */
		padding: 16rpx 24rpx 18rpx;
		flex-direction: column;
		flex-grow: 1;
		/* background-color: #fa4126; */
	}

	.goods-card__upper {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		flex: 1 1 auto;
	}

	.goods-card__title {
		flex-shrink: 0;
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
		display: -webkit-box;
		height: 72rpx;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-word;
		line-height: 36rpx;
	}

	.goods-card__tags {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 8rpx 0 0 0;
	}

	.goods-card__tag {
		color: #fa4126;
		background: transparent;
		font-size: 20rpx;
		border: 1rpx solid #fa4126;
		padding: 0 8rpx;
		border-radius: 16rpx;
		line-height: 30rpx;
		margin: 0 8rpx 8rpx 0;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		word-break: keep-all;
		text-overflow: ellipsis;
	}

	.goods-card__down {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: baseline;
		line-height: 48rpx;
		margin: 8rpx 0 0 0;
		position: relative;

	}

	.goods-card__origin-price {
		white-space: nowrap;
		font-weight: 700;
		order: 2;
		color: #bbbbbb;
		font-size: 24rpx;
		margin: 0 0 0 8rpx;
	}

	.goods-card__add-cart {
		order: 3;
		margin: auto 0 0 auto;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.spec-for-price {
		font-size: 36rpx;
		white-space: nowrap;
		font-weight: 700;
		order: 1;
		color: #fa4126;
		margin: 0;
	}

	.spec-for-symbol {
		font-size: 24rpx;
	}
</style>